<template>
  <div class="order">
    <div class="me_order">
      <div>我的订单</div>
      <div>全部 ></div>
    </div>

    <naviga-tion class="naviga-tion">
      <div slot="one">
        <img src="~assets/img/profile/orderform/payment.svg" alt="" />
        <p>付款</p>
      </div>
      <div slot="two">
        <img src="~assets/img/profile/orderform/shipments.svg" alt="" />
        <p>发货</p>
      </div>
      <div slot="three">
        <img src="~assets/img/profile/orderform/goods.svg" alt="" />
        <p>收货</p>
      </div>
      <div slot="four">
        <img src="~assets/img/profile/orderform/appraise.svg" alt="" />
        <p>评价</p>
      </div>

      <div slot="five">
        <img src="~assets/img/profile/orderform/refund.svg" alt="" />
        <p>售后</p>
      </div>
    </naviga-tion>
  </div>
</template>

<script>
import NavigaTion from "./NavigaTion.vue";

export default {
  name: "OrderForm",
  components: {
    NavigaTion,
  },
};
</script>

<style scoped>
.order {
  background: url("../../../assets/img/regisetr/login2.jpg");
  background-size: cover;
  height: 20vh;
  width: 96%;
  border: 3px solid seashell;
  margin-left: 3%;
}
.me_order {
  height: 32%;
  width: 100%;
  display: flex;
  border-bottom: 1px solid #f9f9f9;
  font-weight: bold;
  color: #000;
}

.me_order div {
  margin-top: 2.5%;
}

.me_order div:nth-of-type(1) {
  width: 20%;
  margin-left: 3%;
}

.me_order div:nth-of-type(2) {
  margin-left: 61%;
  color: #8d8d8d;
}

.naviga-tion {
  text-align: center;
  font-size: 12px;
}

.naviga-tion div {
  width: 50%;
  margin: 25%;
}

.naviga-tion div img {
  width: 100%;
}

.naviga-tion div p {
  margin-top: 15%;
}
</style>
